<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="decorator/decorator">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>订单显示</title>
<link rel="stylesheet" href="css/bootstrap.css"/>

<!-- <script th:src="@{/js/order.js}" type="text/javascript"></script> -->
<script th:src="@{/js/jquery-1.11.1.min.js}" type="text/javascript"></script>
<script src="js/jquery.jqprint-0.3.js" type="text/javascript"></script>
<script src="js/jquery-migrate-1.1.0.js" type="text/javascript"></script> 
<!-- <script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script> -->
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.hovertable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #999999;
	border-collapse: collapse;
}
table.hovertable th {
	
	background-color:#c3dde0;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}
table.hovertable tr {
	background-color:#d4e3e5;
}
table.hovertable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}
</style>

</head>
<body>  
 <div layout:fragment="content" th:remove="tag">
<div class="modal fade" id="showOrderModal" tabindex="-1" role="dialog" aria-labelledby="showOrderModalLabel">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="true">
			         &times;
			       	</button>
			        <h4 class="modal-title" id="showOrderModalLabel">
			      		订单详情</h4>
			      </div>
			      <div class="modal-body">
			       		<form id = "showOrderForm" method="post">
			       		<p><label>订单号：</label><span class="orderId" id="orderId"></span></p>
			       		<p><label>餐桌：</label><span class="tablename"></span></p>
			       		<p><label>点餐时间:</label></p>
			       		<span class="orderdate"></span><p/>
			       		<p><label>菜单</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label>数量</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label>价格</label></p>
			       		<p>------------------------------------------------------</p>
			       		       					       	
<!-- 			       		<p><span class="food-name"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;;&nbsp;&nbsp;&nbsp;&nbsp;￥<span class="price"></span></p> -->
			       			<input type="hidden" id="orderId"/>
			       			<div id="detallContent">
			       			</div>
			       		<p>------------------------------------------------------</p> 
			       		<p><label>总金额：￥</label>
			       		<span class="totalprice"></span>
		
			       		</p>
			       		
			       		</form>    		
			       
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			         <button id="SaveBtn" type="button" class="btn btn-primary">结账</button>
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div><!-- /.modal -->


<!-- Table goes in the document BODY -->

<table class="hovertable" align="center" width="80%">
   <tr><td colspan="6" align="center"><h3>订单显示</h3></td></tr>
	<tr>
		<th>订单编号</th>
        <th>下单日期</th>
        <th>订单总额</th>
        <th>是否结账</th>
        <th>查看订单</th>
        <th>删除订单</th>
	</tr>
	
	<tr th:each="order:${order}"  onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
		<td th:text="${order.orderId}"></td>
        <td th:text="${order.orderdate}"></td>
        <td th:text="${order.totalprice}"></td>
        
        <td th:text="已付款" th:if="${order.orderstatus==0}"></td>
        <td th:text="未付款" th:if="${order.orderstatus!=0}"></td>

        <td><input type="button" value="查看订单" class="show-order"/></td>
<!-- 			 <td><input type="button" value="查看订单" th:onclick="'findbyorderid('+${order.orderId}+');'"/></td> -->
        <td><input type="button" value="删除订单" th:onclick="'deleteorder('+${order.orderId}+','+${order.orderstatus}+');'"/></td>


	</tr>
	
</table>





<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script type="text/javascript">
$(function(){
	


	$('.show-order').click(function(){
		var orderId=$(this).parents("td").siblings("td").eq(0).text();
		//debugger;
		$.ajax({
			type:'POST',
			url:'/findByOrderId',
			data:{
				orderId:orderId
			},
			dataType:"json",
			
			success:function(data){
				var htmlString = '';
				var order = data.order;
				for(var i = 0; i!=data.orderdetall.length;i++ ){
					var orderdetall = data.orderdetall[i];
					
					htmlString += '<label>';
					//htmlString += '		数量：<br/>';
					htmlString += '		<span>'+orderdetall.foodName+'</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
					htmlString += '		<span>'+orderdetall.foodcount+'</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
					htmlString += '		<span>￥'+orderdetall.price+'</span>';
					htmlString += '</label><br/>';
					$('#showOrderModal #orderId').text(order.orderId);
					$('#showOrderModal .totalprice').text(order.totalprice);
					$('#showOrderModal .orderdate').text((new Date(order.orderdate)).Format("yyyy-MM-dd hh:mm:ss"));
					$('#showOrderModal .tablename').text(order.tableName);
					//htmlString += '<span th:each="order:${order}"></span>';	
					//htmlString +=	'';
					
				}
// 				if(data.order!=null){
// 					var order = data.order;
// 					htmlString += '<label>';
// 					htmlString += '		<span>'+order.totalprice+'</span>';
// 					htmlString += '</label>';
// 					}
				$('#detallContent').html(htmlString);
				
				//$('#oId').val(orderId);
				$('#orderId').val(orderId);
				
			}
		});
		
// 		$.ajax({
// 			type:'POST',
// 			url:'/findByOrderId',
// 			data:{
// 				orderId:orderId
// 			},
// 			dataType:"json",
			
// 			success:function(data){
// 				var htmlString = '';
// 				if(data.order!=null){
// 				var order = data.order;
// 				htmlString += '<label>';
// 				htmlString += '		<span>'+order.totalprice+'</span>';
// 				htmlString += '</label>';
// 				}
// 			}
// 			$('#total').html(htmlString);
// 			$('#oId').val(orderId);
// 		});
		
		$('#showOrderModal').modal('show');
	});

	$('#SaveBtn').click(function(){
		var orderId=$('#showOrderForm span[id="orderId"]').val();
		//var orderstatus=$('#showOrderForm input[name="orderstatus"]').val();
		//alert(orderId)
		$.ajax({
			type:'POST',
			url:'/editOrder',
			data:{
				orderId:orderId,
				//orderstatus:orderstatus
			},
			dataType:"json",
			success:function(data){
				if(data.success){
					alert('付款成功');
					if(confirm('是否打印账单？')){
					$('#showOrderModal .modal-body').jqprint();
					}
					//location.href = "/showAllOrder";				
					}else{
						alert('付款失败');
						location.href = "/showAllOrder";
				}
			}
		});
		
	});
	
	Date.prototype.Format = function (fmt) {  
        var o = {  
            "M+": this.getMonth() + 1,  
            "d+": this.getDate(),  
            "h+": this.getHours(),   
            "m+": this.getMinutes(),   
            "s+": this.getSeconds(), 
            "q+": Math.floor((this.getMonth() + 3) / 3), 
            "S": this.getMilliseconds() 
        };  
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));  
        for (var k in o)  
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));  
        return fmt;  
    };  
	
 })

	function deleteorder(orderId,orderstatus) {
//		if(confirm('是否删除'+orderId)){
//	    location.href = "/deleteOrder/";
//		}
		if(confirm('是否删除'+orderId)){
			
			$.ajax({
				type:"POST",
				url:"/deleteOrder",
				//contentType : "application/json",
				data:{
					orderId:orderId,
					orderstatus:orderstatus
					},
				dataType:"json",
				
				success:function(data){
					
					if(data.success){
					alert('删除成功');
					
					location.href = "/showAllOrder";
					}else{
						alert('删除失败,该账单还没结账');
						location.href = "/showAllOrder";
					}
				}
			});				
		}
	}
	

</script>
</div>
</body>
</html>